<template>
  <div style="overflow: hidden">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import OnEvent from "../common/OnEvent";

export default {
  extends: OnEvent,
  props: {
    propValue: {
      type: Object,
      required: true,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      width: 0,
      height: 0,
      img: null,
      canvas: null,
      ctx: null,
      isFirst: true,
    };
  },
  watch: {
    "element.style.width": function () {
      this.drawImage();
    },
    "element.style.height": function () {
      this.drawImage();
    },
    "propValue.flip.vertical": function () {
      this.mirrorFlip();
    },
    "propValue.flip.horizontal": function () {
      this.mirrorFlip();
    },
    "propValue.url": function () {
      this.drawImage();
    },
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.drawImage();
  },
  methods: {
    drawImage() {
      const { width, height } = this.element.style;
      this.canvas.width = width;
      this.canvas.height = height;
      if (this.isFirst) {
        this.isFirst = false;
        this.img = document.createElement("img");

        
        this.img.src = this.propValue.url;
        this.img.onload = () => {
          this.ctx.drawImage(this.img, 0, 0, width, height);
          this.mirrorFlip();
        };
      } else {
        if (this.img.src != this.propValue.url) {
          this.img.src = this.propValue.url;
        }

        this.mirrorFlip();
      }
    },

    mirrorFlip() {
      const { vertical, horizontal } = this.propValue.flip;
      const { width, height } = this.element.style;
      const hvalue = horizontal ? -1 : 1;
      const vValue = vertical ? -1 : 1;

      // 清除图片
      this.ctx.clearRect(0, 0, width, height);
      // 平移图片
      this.ctx.translate(
        width / 2 - (width * hvalue) / 2,
        height / 2 - (height * vValue) / 2
      );
      // 对称镜像
      this.ctx.scale(hvalue, vValue);
      this.ctx.drawImage(this.img, 0, 0, width, height);
      // 还原坐标点
      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
    },
  },
};
</script>
